<!--商城首页-->
<template>
  <div class="container">
    <Search></Search>
    <HomeNav></HomeNav>
    <!-- 商品显示区域 -->
    <div class="content">
      <!-- 秒杀 -->
      <div class="seckill">
        <!-- 头部 -->
        <div class="seckill-head">
          <div class="seckill-icon">
            <img src="static/img/index/clock.png">
          </div>
          <div class="seckill-text">
            <span class="seckill-title">限时秒杀</span>
            <span class="seckill-remarks">总有你想不到的低价</span>
          </div>
        </div>
        <!-- 内容 -->
        <div class="seckill-content">
          <div class="seckill-item" v-for="(item, index) in secProducts" :key="index">
            <div class="seckill-item-img">
              <span @click="secDetail(item.id)"><img :src="item.picUrl"></span>
            </div>
            <div class="seckill-item-info">
              <p>{{item.productName}}</p>
              <p>
                <span class="seckill-price text-danger"><Icon type="social-yen"></Icon>{{item.price}}</span>
<!--                <span class="seckill-old-price"><s>{{item.realPrice}}</s></span>-->
              </p>
              <p>{{item.supplierName}}</p>
              <p>
                <span class="count-down-num count-down-hour">{{ hou[index] }}</span>
                                <span class="count-down-point">:</span>
                                <span class="count-down-num count-down-minute">{{ min[index] }}</span>
                                <span class="count-down-point">:</span>
                                <span class="count-down-num count-down-seconds">{{ sec[index] }}</span>
                                <span class="count-down-text">后结束抢购</span>
              </p>
            </div>
          </div>
        </div>
        <div>
<!--          <el-button-group class="page">-->
<!--            <el-button type="primary" @click="firstPage">首页</el-button>-->
<!--            <el-button type="primary" icon="el-icon-arrow-left" @click="prePage">上一页</el-button>-->
<!--            <el-button type="primary" disabled>第{{this.pages.pageNum}}页</el-button>-->
<!--            <el-button type="primary" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon&#45;&#45;right"></i></el-button>-->
<!--          </el-button-group>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Search from '@/components/Search';
import HomeNav from '@/components/nav/HomeNav';
import store from '@/vuex/store';
import { mapState, mapActions, mapGetters, mapMutations } from 'vuex';
// import {orderInfo} from '../api/order';
import {allSecProductInfo} from '../api/category';
// import {allSecProductInfo} from '../api/category';
export default {
  name: 'Index',
  created () {
    this.loadSeckillsInfo();
    this.loadCarouselItems();
    this.loadComputer();
    this.loadEat();
    this.loadShoppingCart();
    // 显示倒计时
    this.time();
    this.showPage();
  },
  mounted () {
    const father = this;
    this.setIntervalObj = setInterval(function () {
      father.REDUCE_SECKILLS_TIME();
    }, 1000);
  },
  data () {
    // let hou, min, sec;
    return {
      setIntervalObj: null,
      // 秒杀产品
      secProducts: [],
      hou: [],
      min: [],
      sec: [],
      dataCount: 0,
      pages: {
        pageNum: 1,
        pageSize: 5
      }
    };
  },
  methods: {
    ...mapActions(['loadSeckillsInfo', 'loadCarouselItems', 'loadComputer', 'loadEat', 'loadShoppingCart']),
    ...mapMutations(['REDUCE_SECKILLS_TIME']),
    // 显示当前页信息
    showPage () {
      allSecProductInfo(this.pages).then((res) => {
        if (res.data.code === '00000') {
          console.log(res.data);
          // 处理类型
          // product获取数据
          console.log(res.data.code);
          this.secProducts = res.data.data;
          console.log(this.secProducts);
          this.dataCount = this.secProducts.length;
          if (this.dataCount === 0 && this.pages.pageNum !== 1) {
            // 超出尾页了
            this.pages.pageNum = this.pages.pageNum - 1;
            this.showPage();
            this.$Message.error('现在已经是尾页了哦~');
          }
        } else {
          this.$Message.error(res.data.code);
        }
      });
    },
    // 下一页
    nextPage () {
      this.pages.pageNum = this.pages.pageNum + 1;
      this.showPage();
    },
    // 上一页
    prePage () {
      if (this.pages.pageNum === 1) {
        this.$Message.error('现在已经是首页了哦~');
      } else {
        this.pages.pageNum = this.pages.pageNum - 1;
        this.showPage();
      }
    },
    // 首页
    firstPage () {
      if (this.pages.pageNum === 1) {
        this.$Message.error('现在已经是首页了哦~');
      } else {
        this.pages.pageNum = 1;
        this.showPage();
      }
    },
    secDetail (id) {
      this.$Message.success(id);
      // 跳转到商品详情界面
      this.$router.push({
        path: '/goodsDetail',
        query: {productId: id}
      });
    },
    time () {
      // 秒杀商品
      this.showPage();
      var that = this;
      // console.log(that.secProducts);
      // eslint-disable-next-line no-unused-vars
      var interval = setInterval(function timestampToTime () {
        for (let i = 0; i < that.secProducts.length; i++) {
          var date = (new Date(that.secProducts[i].restTime)) - (new Date());
          // new Date当前的时间戳，也可以换成自定义的时间戳
          if (date > 0) {
            let time = date / 1000;
            // var xiaoshi,fenzhong,miao;
            // 获取日，时、分、秒
            var shi = parseInt((time % (60 * 60 * 24)) / 3600) < 10 ? ('0' + parseInt((time % (60 * 60 * 24)) / 3600)) : parseInt((time % (60 * 60 * 24)) / 3600);
            var fen = parseInt(((time % (60 * 60 * 24)) % 3600) / 60) < 10 ? ('0' + parseInt(((time % (60 * 60 * 24)) % 3600) / 60)) : parseInt(((time % (60 * 60 * 24)) % 3600) / 60);
            var miao = parseInt(((time % (60 * 60 * 24)) % 3600) % 60) < 10 ? ('0' + parseInt(((time % (60 * 60 * 24)) % 3600) % 60)) : parseInt(((time % (60 * 60 * 24)) % 3600) % 60);
            that.$set(that.hou, i, shi);
            that.$set(that.min, i, fen);
            that.$set(that.sec, i, miao);
          } else {
            // 活动已结束，全部设置为'00'
            // console.log("aaa")
            // eslint-disable-next-line no-sequences,no-unused-expressions
            that.hou[i] = '00',
            that.min[i] = '00',
            that.sec[i] = '00';
          }
        }
      }, 100);
    }
  },
  computed: {
    ...mapState([ 'seckills', 'computer', 'eat' ]),
    ...mapGetters([ 'seckillsHours', 'seckillsMinutes', 'seckillsSeconds' ])
  },
  components: {
    Search,
    HomeNav
  },
  destroyed () {
    clearInterval(this.setIntervalObj);
  },
  store
};
</script>

<style scoped>
.container {
  background-color: #F6F6F6;
}
.content {
  width: 1008px;
  margin: 0px auto;
}
/*****************************秒杀专栏开始*****************************/
/*秒杀专栏*/
.seckill {
  width: 100%;
  height: 360px;
  margin: 15px auto;
  background-color: #fff;
}
.seckill-head {
  width: 100%;
  height: 50px;
  background-color: #e01222;
}
.seckill-icon {
  width: 68px;
  height: 100%;
  float: left;
}
.seckill-icon img {
  width: 35px;
  height: 35px;
  margin-top: 6px;
  margin-left: 15px;
  animation-name: shake-clock;
  animation-duration: 0.3s;
  animation-iteration-count: infinite; /*设置无线循环*/
}
/*定义闹钟震动动画关键帧*/
@keyframes shake-clock {
  0% {
    transform: rotate(-8deg);
  }
  50% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(-8deg);
  }
}
.seckill-text {
  width: 300px;
  height: 100%;
  float: left;
}
.seckill-text .seckill-title {
  font-size: 22px;
  line-height: 50px;
  color: #fff;
}
.seckill-text .seckill-remarks {
  margin-left: 5px;
  font-size: 10px;
  color: #fff;
}
/*倒计时*/
.count-down {
  height: 100%;
  margin-right: 30px;
  line-height: 50px;
  float: right;
}
.count-down-text {
  color: red;
}
.count-down-num {
  padding: 3px;
  border-radius: 5px;
  background-color: lightgoldenrodyellow;
  font-size: 10px;
  font-weight: bold;
  color: #f90013;
}
.count-down-point {
  font-size: 16px;
  font-weight: bold;
  color: #440106;
}

.seckill-content {
  width: 100%;
  height: 330px;
}
.seckill-item {
  width: 183px;
  height: 310px;
  margin-top: 15px;
  margin-left: 15px;
  box-shadow: 0px 0px 8px #ccc;
  cursor: pointer;
  float: left;
}
.seckill-item-img {
  width: 160px;
  height: 160px;
  margin: 0px auto;
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  background-color: #fff;
}
.seckill-item-img img {
  width: 130px;
  height: 130px;
  margin-left: 15px;
  margin-top: 15px;
  transition: margin-top 0.3s;
}
.seckill-item-img:hover img {
  margin-top: 6px;
  transition: margin-top 0.3s;
}
.seckill-item-info {
  padding: 5px;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 12px;
  color: #009688;
}
.seckill-item-info i:first-child {
  font-size: 14px;
}
.seckill-price {
  margin-right: 5px;
  font-size: 25px;
  font-weight: bold;
}
.page{
  position: absolute;
  left: 55%;
  transform: translate(-50%);
}
/*****************************秒杀专栏结束*****************************/
</style>
